// 定时器
var xiaoshi = document.getElementById('B-xiaoshi');
var fenzhong = document.getElementById('B-fenzheng');
var miaoshu = document.getElementById('B-miaoshu');
// var maxImg = document.getElementById('maxImg');

var date1 = new Date('2022/01/01 00:00:00');

setInterval(function() {
    // 获取当前时间
    var date2 = new Date();

    // 获取一下当前时间到2021年1月1日时间的差的毫秒数
    var mill = date1 - date2;

    // 获取天数  
    var day = Math.floor(mill / 1000 / 60 / 60 / 24);

    // 拿总时间 - 天数的时间 = 不足一天的毫秒值
    mill = mill - day * 1000 * 60 * 60 * 24;

    // 获取小时
    var hours = Math.floor(mill / 1000 / 60 / 60);
    hours = hours < 10 ? '0' + hours : hours;
    mill = mill - hours * 1000 * 60 * 60;

    // 获取分钟
    var minutes = Math.floor(mill / 1000 / 60);
    minutes = minutes < 10 ? '0' + minutes : minutes;
    mill = mill - minutes * 1000 * 60;

    // 获取秒
    var seconds = Math.floor(mill / 1000);
    seconds = seconds < 10 ? '0' + seconds : seconds;

    xiaoshi.innerText = hours;

    fenzhong.innerText = minutes;

    miaoshu.innerText = seconds;
}, 4);
// 数字框的加减-----------------------------------------------------------------------------------
var shuzikuang = document.getElementById('B-sz3');
var jia = document.getElementById('B-sz4');
var jian = document.getElementById('B-sz5');
jia.onclick = function() {
    var limianshuzhi = Number(shuzikuang.value) + 1;
    shuzikuang.value = limianshuzhi
}
jian.onclick = function() {
    var limianshuzhi = Number(shuzikuang.value) - 1;
    shuzikuang.value = limianshuzhi
    if (shuzikuang.value <= 0) {
        shuzikuang.value = 1
    }
}

// 渲染页面-------------------------------------------------------------
//需要放大的图片
var Bbigimg = document.getElementById('B-fdjimg');

console.log(Bbigimg);
//需要放大图片下面的list小图片
var Bimglist1 = document.getElementById('B-imglist1');
var Bimglist2 = document.getElementById('B-imglist2');
var Bimglist3 = document.getElementById('B-imglist3');
var Bimglist4 = document.getElementById('B-imglist4');
var Bimglist5 = document.getElementById('B-imglist5');
//标题
var title = document.getElementById('B-fdjtitle')
    //放大区域的盒子
var fdjhz = document.getElementById('B-fdjfdq');
console.log(fdjhz);

//秒杀价
var msj = document.getElementById('B-msj2');
//市场价
var shichang = document.getElementById('B-shichang2');
//累计销量
var xiaoliang = document.getElementById('B-ljxl');
//右侧的li盒子
var right1 = document.getElementById('B-right1');
var right2 = document.getElementById('B-right2');
var right3 = document.getElementById('B-right3');

var ids = location.href.split('?')[1];

var ids1 = ids.includes('#');
console.log(ids1);
if (ids1 == true) {
    ids = ids.split('=')[1];
    ids = Number(ids.split('#')[0]);
    console.log(ids);


    for (var i = 0; i < listData.length; i++) {
        if (listData[i].id == ids) {
            //标题
            title.innerHTML = listData[i].title
                //图片渲染
            var img = document.createElement('img');
            img.src = listData[i].bigimg;
            img.className = 'Bimg';
            Bbigimg.appendChild(img);
            //放大镜的图片
            var img = document.createElement('img');
            img.src = listData[i].bigimg;
            img.className = 'Bfdimg';
            fdjhz.appendChild(img);
            //放大镜下边的小图片1
            var img = document.createElement('img');
            img.src = listData[i].imglist1;
            img.className = 'imglist1';
            Bimglist1.appendChild(img);
            //放大镜下边的小图片2
            var img = document.createElement('img');
            img.src = listData[i].imglist2;
            img.className = 'imglist2';
            Bimglist2.appendChild(img);
            //放大镜下边的小图片3
            var img = document.createElement('img');
            img.src = listData[i].imglist3;
            img.className = 'imglist3';
            Bimglist3.appendChild(img);
            //放大镜下边的小图片4
            var img = document.createElement('img');
            img.src = listData[i].imglist4;
            img.className = 'imglist4';
            Bimglist4.appendChild(img);
            //放大镜下边的小图片5
            var img = document.createElement('img');
            img.src = listData[i].imglist5;
            img.className = 'imglist5';
            Bimglist5.appendChild(img);
            //秒杀价的渲染
            var span = document.createElement('span');
            span.innerText = listData[i].scj;
            span.className = 'Bmsj2'
            msj.appendChild(span);
            //累计销量
            var span = document.createElement('span');
            span.innerText = listData[i].ljxl;
            span.className = 'Bljxl'
            xiaoliang.appendChild(span);
            //市场价
            var span = document.createElement('span');
            span.innerText = listData[i].yj;
            span.className = 'Byjg';
            shichang.appendChild(span);
            //右侧的图片渲染1
            var img = document.createElement('img');
            img.src = listData[i].listright1;
            img.className = 'listright11';
            right1.appendChild(img);
            //右侧的文字渲染1
            var a = document.createElement('a');
            a.innerText = listData[i].listright1p;
            a.className = 'listright12';
            right1.appendChild(a);
            //右侧的价格渲染1
            var span = document.createElement('span');
            span.innerText = listData[i].listright2j;
            span.className = 'listright13';
            right1.appendChild(span);
            //右侧的图片渲染2
            var img = document.createElement('img');
            img.src = listData[i].listright2;
            img.className = 'listright21';
            right2.appendChild(img);
            //右侧的文字渲染2
            var a = document.createElement('a');
            a.innerText = listData[i].listright2p;
            a.className = 'listright22';
            right2.appendChild(a);
            //右侧的价格渲染2
            var span = document.createElement('span');
            span.innerText = listData[i].listright2j;
            span.className = 'listright23';
            right2.appendChild(span);
            //右侧的图片渲染3
            var img = document.createElement('img');
            img.src = listData[i].listright3;
            img.className = 'listright31';
            right3.appendChild(img);
            //右侧的文字渲染3
            var a = document.createElement('a');
            a.innerText = listData[i].listright3p;
            a.className = 'listright32';
            right3.appendChild(a);
            //右侧的价格渲染3
            var span = document.createElement('span');
            span.innerText = listData[i].listright3j;
            span.className = 'listright33';
            right3.appendChild(span);



            var danjia = listData[i].scj.substr(1, 9);
            danjia = parseInt(danjia);

            // 点击后加入购物车的小计----------------------------------------------------
            // 加入购物车按键
            var djjrguc = document.getElementById('B-jr2');
            // 大蒙版
            var damengban = document.getElementById('B-jrgwcmb');
            // 购物车的盒子
            var gouwuche = document.getElementById('B-jrgwc');

            var jianshu = document.getElementById('B-cgtjxq1');
            var zongjia = document.getElementById('B-cgtjxq2');
            djjrguc.onclick = function() {
                    damengban.style.display = 'block';
                    gouwuche.style.display = 'block';
                    jianshu.innerText = shuzikuang.value;
                    var zongjine = Number((shuzikuang.value) * danjia)
                    zongjia.innerText = zongjine;
                }
                //叉号
            var chazi = document.getElementById('B-ts2')
            chazi.onclick = function() {
                    damengban.style.display = 'none';
                    gouwuche.style.display = 'none';
                }
                //继续购物按钮
            var jixugouwu = document.getElementById('B-jxgm')
            jixugouwu.onclick = function() {
                    damengban.style.display = 'none';
                    gouwuche.style.display = 'none';
                }
                //去付款按钮
            var qufukuan = document.getElementById('B-qfk');
            qufukuan.onclick = function() {

                }
                // 放大镜------------------------------------------------------------
                //蒙版下的图片盒子
            var min = document.getElementById('B-fdjimg');
            //右边放大的图片盒子
            var max = document.getElementById('B-fdjfdq');
            //蒙版
            var mask = document.getElementById('mask');
            var dahezi = document.getElementById('B-fdjimg');
            //放大区域盒子里面的图片
            var maxImg = max.getElementsByTagName('img')[0];
            console.log(maxImg);
            console.log(11111111);

            // 1.鼠标移动到小盒子里,蒙版出现,大盒子出现
            min.onmouseover = function() {
                mask.style.display = "block";
                max.style.display = "block";
            };
            // 2.蒙版跟随鼠标移动
            min.onmousemove = function(e) {
                // 光标在小盒子内的坐标
                var minX = e.pageX - min.offsetLeft;
                var minY = e.pageY - min.offsetTop;
                // 使光标在蒙版的中间
                minX = minX - mask.offsetWidth / 2;
                minY = minY - mask.offsetHeight / 2;
                // 最大值距离
                var maskmovedisX = min.offsetWidth - mask.offsetWidth;
                var maskmovedisY = min.offsetHeight - mask.offsetHeight;
                if (minX > maskmovedisX) {
                    minX = maskmovedisX;
                } else if (minX < 0) {
                    minX = 0
                };
                if (minY > maskmovedisY) {
                    minY = maskmovedisY;
                } else if (minY < 0) {
                    minY = 0
                };
                // 设置蒙版的位置
                mask.style.left = minX + 'px';
                mask.style.top = minY + 'px';
                // 求比例关系
                // 3.蒙版移动,大盒子里的图片也移动
                var radioX = minX / maskmovedisX;
                var radioY = minY / maskmovedisY;
                // console.log(minY);

                // 求大图片移动的距离
                maxImg.style.left = radioX * (max.offsetWidth - maxImg.offsetWidth) + 'px';
                maxImg.style.top = radioY * (max.offsetHeight - maxImg.offsetHeight) + 'px';
            };
            // 4.鼠标离开小盒子,蒙版消失,大盒子消失
            min.onmouseout = function() {
                mask.style.display = "none";
                max.style.display = "none";
            };
        }
    }

} else if (ids1 == false) {
    ids = Number(ids.split('=')[1]);
    // ids = ids.substr(0, 1);
    console.log(ids);

    for (var i = 0; i < listData.length; i++) {
        if (listData[i].id == ids) {
            //标题
            title.innerHTML = listData[i].title
                //图片渲染
            var img = document.createElement('img');
            img.src = listData[i].bigimg;
            img.className = 'Bimg';
            Bbigimg.appendChild(img);
            //放大镜的图片
            var img = document.createElement('img');
            img.src = listData[i].bigimg;
            img.className = 'Bfdimg';
            fdjhz.appendChild(img);
            //放大镜下边的小图片1
            var img = document.createElement('img');
            img.src = listData[i].imglist1;
            img.className = 'imglist1';
            Bimglist1.appendChild(img);
            //放大镜下边的小图片2
            var img = document.createElement('img');
            img.src = listData[i].imglist2;
            img.className = 'imglist2';
            Bimglist2.appendChild(img);
            //放大镜下边的小图片3
            var img = document.createElement('img');
            img.src = listData[i].imglist3;
            img.className = 'imglist3';
            Bimglist3.appendChild(img);
            //放大镜下边的小图片4
            var img = document.createElement('img');
            img.src = listData[i].imglist4;
            img.className = 'imglist4';
            Bimglist4.appendChild(img);
            //放大镜下边的小图片5
            var img = document.createElement('img');
            img.src = listData[i].imglist5;
            img.className = 'imglist5';
            Bimglist5.appendChild(img);
            //秒杀价的渲染
            var span = document.createElement('span');
            span.innerText = listData[i].scj;
            span.className = 'Bmsj2'
            msj.appendChild(span);
            //累计销量
            var span = document.createElement('span');
            span.innerText = listData[i].ljxl;
            span.className = 'Bljxl'
            xiaoliang.appendChild(span);
            //市场价
            var span = document.createElement('span');
            span.innerText = listData[i].yj;
            span.className = 'Byjg';
            shichang.appendChild(span);
            //右侧的图片渲染1
            var img = document.createElement('img');
            img.src = listData[i].listright1;
            img.className = 'listright11';
            right1.appendChild(img);
            //右侧的文字渲染1
            var a = document.createElement('a');
            a.innerText = listData[i].listright1p;
            a.className = 'listright12';
            right1.appendChild(a);
            //右侧的价格渲染1
            var span = document.createElement('span');
            span.innerText = listData[i].listright2j;
            span.className = 'listright13';
            right1.appendChild(span);
            //右侧的图片渲染2
            var img = document.createElement('img');
            img.src = listData[i].listright2;
            img.className = 'listright21';
            right2.appendChild(img);
            //右侧的文字渲染2
            var a = document.createElement('a');
            a.innerText = listData[i].listright2p;
            a.className = 'listright22';
            right2.appendChild(a);
            //右侧的价格渲染2
            var span = document.createElement('span');
            span.innerText = listData[i].listright2j;
            span.className = 'listright23';
            right2.appendChild(span);
            //右侧的图片渲染3
            var img = document.createElement('img');
            img.src = listData[i].listright3;
            img.className = 'listright31';
            right3.appendChild(img);
            //右侧的文字渲染3
            var a = document.createElement('a');
            a.innerText = listData[i].listright3p;
            a.className = 'listright32';
            right3.appendChild(a);
            //右侧的价格渲染3
            var span = document.createElement('span');
            span.innerText = listData[i].listright3j;
            span.className = 'listright33';
            right3.appendChild(span);



            var danjia = listData[i].scj.substr(1, 9);
            danjia = parseInt(danjia);

            // 点击后加入购物车的小计----------------------------------------------------
            // 加入购物车按键
            var djjrguc = document.getElementById('B-jr2');
            // 大蒙版
            var damengban = document.getElementById('B-jrgwcmb');
            // 购物车的盒子
            var gouwuche = document.getElementById('B-jrgwc');

            var jianshu = document.getElementById('B-cgtjxq1');
            var zongjia = document.getElementById('B-cgtjxq2');
            console.log(shuzikuang.value);
            djjrguc.onclick = function() {
                    damengban.style.display = 'block';
                    gouwuche.style.display = 'block';
                    jianshu.innerText = shuzikuang.value;
                    var zongjine = Number((shuzikuang.value) * danjia)
                    zongjia.innerText = zongjine;
                }
                //叉号
            var chazi = document.getElementById('B-ts2')
            chazi.onclick = function() {
                    damengban.style.display = 'none';
                    gouwuche.style.display = 'none';
                }
                //继续购物按钮
            var jixugouwu = document.getElementById('B-jxgm')
            jixugouwu.onclick = function() {
                    damengban.style.display = 'none';
                    gouwuche.style.display = 'none';
                }
                //去付款按钮
            var qufukuan = document.getElementById('B-qfk');
            qufukuan.onclick = function() {

                }
                // 放大镜------------------------------------------------------------
                //蒙版下的图片盒子
            var min = document.getElementById('B-fdjimg');
            //右边放大的图片盒子
            var max = document.getElementById('B-fdjfdq');
            //蒙版
            var mask = document.getElementById('mask');
            var dahezi = document.getElementById('B-fdjimg');
            //放大区域盒子里面的图片
            var maxImg = max.getElementsByTagName('img')[0];
            console.log(maxImg);

            // 1.鼠标移动到小盒子里,蒙版出现,大盒子出现
            min.onmouseover = function() {
                mask.style.display = "block";
                max.style.display = "block";
            };
            // 2.蒙版跟随鼠标移动
            min.onmousemove = function(e) {
                // console.log(e.pageX);
                // console.log(e.pageY);
                // console.log(e.clientX);
                // console.log(e.clientY);
                // 光标在小盒子内的坐标
                var minX = e.pageX - min.offsetLeft;
                var minY = e.pageY - min.offsetTop;
                // console.log(minX);
                // console.log(minY);
                // 使光标在蒙版的中间
                minX = minX - mask.offsetWidth / 2;
                minY = minY - mask.offsetHeight / 2;
                // 最大值距离
                var maskmovedisX = min.offsetWidth - mask.offsetWidth;
                var maskmovedisY = min.offsetHeight - mask.offsetHeight;
                if (minX > maskmovedisX) {
                    minX = maskmovedisX;
                } else if (minX < 0) {
                    minX = 0
                };
                if (minY > maskmovedisY) {
                    minY = maskmovedisY;
                } else if (minY < 0) {
                    minY = 0
                };
                // 设置蒙版的位置
                mask.style.left = minX + 'px';
                mask.style.top = minY + 'px';
                // 求比例关系
                // 3.蒙版移动,大盒子里的图片也移动
                var radioX = minX / maskmovedisX;
                var radioY = minY / maskmovedisY;
                // console.log(minY);

                // 求大图片移动的距离
                maxImg.style.left = radioX * (max.offsetWidth - maxImg.offsetWidth) + 'px';
                maxImg.style.top = radioY * (max.offsetHeight - maxImg.offsetHeight) + 'px';
            };
            // 4.鼠标离开小盒子,蒙版消失,大盒子消失
            min.onmouseout = function() {
                mask.style.display = "none";
                max.style.display = "none";
            };
        }
    }
}



localStorage.setItem("ID", ids);
var idss = localStorage.getItem("ID");

// 灰色中间区域
var dSideGray = document.querySelector('.d-side-gray-main');
// 要删除的
var dSideGraynot = $('.d-side-gray-main-empty');

var dSideGraypayshopDiv = document.querySelector('.d-side-gray-payshop');
var dSideGraypayshopUl = document.querySelector('.d-side-gray-payshopUl');

$('#B-jr2').on('click', function() {
    for (var i = 0; i < listData.length; i++) {
        if (listData[i].id == idss) {
            // dSideGraynot.remove();
            dSideGraynot.css({
                'display': 'none'
            });


            // 整个li
            var dSideGraypayshopLi = document.createElement('li');
            dSideGraypayshopLi.className = 'd-payshop-li';
            // li里的左边div图片
            var dSideGraypayshopDivIMG = document.createElement('div');
            dSideGraypayshopDivIMG.className = 'd-payshop-Img';
            // 设置图片路径
            var img = document.createElement('img');
            img.src = listData[i].imglist1;
            // 追加到图片div
            dSideGraypayshopDivIMG.append(img);
            // 追加到li里
            dSideGraypayshopLi.append(dSideGraypayshopDivIMG);

            // 设置信息div
            var dSideGraypayshopDivmessage = document.createElement('div');
            dSideGraypayshopDivmessage.className = 'd-payshop-message';
            // 文字信息
            var dmessage = document.createElement('a');
            dmessage.className = 'd-pay-message';
            dmessage.href = '#'
            dmessage.innerText = listData[i].title;
            // 追加到信息div里
            dSideGraypayshopDivmessage.append(dmessage);

            // 价格
            var dpayjiage = document.createElement('div');
            dpayjiage.className = 'd-payjiage'
                // 截取去掉￥
            var danjia = listData[i].scj.substr(1, 9);
            danjia = parseInt(danjia);
            dpayjiage.innerText = danjia;
            // 追加价格到div里
            dSideGraypayshopDivmessage.append(dpayjiage);

            // 按钮框div
            var dpayanniudiv = document.createElement('div');
            dpayanniudiv.className = 'd-payanniudiv'
                // 减
            var dpayanniubutjian = document.createElement('button');
            dpayanniubutjian.id = 'd-btn1'
            dpayanniubutjian.innerText = '-';
            dpayanniudiv.append(dpayanniubutjian);
            // 数字
            var dpaynum = document.createElement('input');
            dpaynum.className = 'd-payNum';
            dpaynum.value = shuzikuang.value;
            dpayanniudiv.append(dpaynum);
            // 加
            var dpayanniubutjia = document.createElement('button');
            dpayanniubutjia.id = 'd-btn2'
            dpayanniubutjia.innerText = '+';
            dpayanniudiv.append(dpayanniubutjia);

            var dpayshanchu = document.createElement('a');
            dpayshanchu.className = 'd-payshanchu';
            dpayshanchu.innerText = '删除'
            dpayanniudiv.append(dpayshanchu);
            dSideGraypayshopDivmessage.append(dpayanniudiv);

            // 把信息div追加到li里
            dSideGraypayshopLi.append(dSideGraypayshopDivmessage)
            dSideGraypayshopUl.append(dSideGraypayshopLi)
            localStorage.setItem("ID2", ids)
        }
    }

    var dnumpaypay = $('.d-payNum').val()
    $('.d-numpay').text(dnumpaypay);
    $('.d-cart_num').text(dnumpaypay);
    $('.d-headshopCar-clount').text(dnumpaypay);


    var count = $('.d-payNum').val();
    var jiage = Number($('.d-payjiage').text());
    var ddheji = count * jiage
    $('.d-bbbpay').text(Number(ddheji));

    // 加
    $('#d-btn2').click(function() {
        var inputele = $(this).prev();
        var thisGoodsCount = Number(inputele.val()) + 1;
        inputele.val(thisGoodsCount);
        var dnumpaypay = inputele.val();
        $('.d-numpay').text(dnumpaypay);
        $('.d-cart_num').text(dnumpaypay);
        $('.d-headshopCar-clount').text(dnumpaypay);
        heji();
    });


    // 减
    $('#d-btn1').click(function() {
        console.log(this);
        var inputValue = $(this).next('input');
        var count = Number(inputValue.val()) - 1;
        if (count == 1) {
            $(this).prop('disabled', true);
        };
        inputValue.val(count);
        var dnumpaypay = inputValue.val();
        $('.d-numpay').text(dnumpaypay);
        $('.d-cart_num').text(dnumpaypay);
        $('.d-headshopCar-clount').text(dnumpaypay);

        heji();
    });




    // 合计
    function heji() {
        var count = $('.d-payNum').val();
        var jiage = Number($('.d-payjiage').text());
        var ddheji = count * jiage
        $('.d-bbbpay').text(Number(ddheji));

    }


    // 删除
    $('.d-payshanchu').click(function() {
        $('.d-payshop-li').remove();
        dSideGraynot.css({
            'display': 'block'
        });
        $('.d-numpay').text('0');
        $('.d-cart_num').text('0');
        $('.d-headshopCar-clount').text('0');
        $('.d-bbbpay').text('00.00');
        localStorage.clear('ID2');
    })
})